<template>
  <div>

    <!-- 商品列表区域 -->
    <div class="goods-list">

      <div class="goods-item" v-for="item in goodslist" :key="item.id" @click="toInfo(item.id)">
        <!-- 商品图片 -->
        <img :src="item.img_url" alt="">
        <h4>{{item.title}}</h4>
        <div class="info">
          <p class="price">
            <span class="nowPrice">￥{{item.sell_price}}</span>
            <span>
              <del>￥{{item.market_price}}</del>
            </span>
          </p>
          <p class="sale">
            <span>热卖中</span>
            <span>剩{{item.stock_quantity}}件</span>
          </p>
        </div>
      </div>

    </div>

    <mt-button type="danger" size="large" style="margin-bottom:10px;" @click="getMore">加载更多</mt-button>

  </div>
</template>


<script>
export default {
  data() {
    return {
      pageindex:1,
      goodslist:[],
    }
  },
  created() {
    // 获取商品列表
    this.getGoodList();
  },
  methods: {
    getGoodList() {
      this.$http.get("api/getgoods?pageindex="+this.pageindex).then(res=>{
        // console.log(res.body);
        if(res.body.status === 0) {
          // 因为需要加载更多，所以数组需要拼接
          this.goodslist = this.goodslist.concat(res.body.message);
        }
      })
    },
    getMore() {
      // 获取下一页数据
      this.pageindex++;
      this.getGoodList();
    },
    toInfo(id) {
      // 编程式导航(命名的路由)
      this.$router.push({name:"goodsInfo",params:{id:id}})
    }
  }
}
</script>


<style lang = "scss" scoped >
  .goods-list {
    display: flex;
    flex-wrap: wrap;
    padding: 3px;

    .goods-item {
      width: 48%;
      border: 1px solid #ccc;
      margin: 1%;
      box-shadow: 0 0 7px #aaa;
      padding: 2px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      img {
        width: 100%;
      }
      h4 {
        font-size: 14px;
      }

      .info {
        background-color: #eee;
        p {
          margin: 0;
          margin-top: 10px;
          font-size: 13px;

          &:nth-child(1) {
            .nowPrice {
              color: red;

              font-size: 15px;
              margin-right: 8px;
            }
          }
          &:nth-child(2) {
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }
  }
</style>